import React from 'react'
import '../styles/theme.css'
import '../styles/backgrounds.css'
import './Home.css'
import homeIcon from '../assets/icon-allocation.png'

export default function Home() {
  return (
    <>
      {/* 全页背景层（首页） */}
      <div className="site-bg bg-home" aria-hidden="true" />

      {/* 首页主内容区（不渲染 Header） */}
      <div className="page-bg">
        <main className="home-hero" role="main" aria-labelledby="home-title">
          <div className="hero-inner container">
            <div className="hero-content">
              <div className="logo-slim">
                <img src={homeIcon} alt="风电叶片缺陷检测系统" className="logo-badge-large" />
                <div>
                  <div className="site-title">风力发电叶片缺陷检测系统</div>
                  <div className="site-sub">基于深度学习 · AI 驱动</div>
                </div>
              </div>

              <h1 id="home-title" className="hero-title">
                智能检测叶片缺陷
              </h1>

              <p className="hero-sub">
                🚀 上传图片即可自动检测裂纹、油污、剥落等常见缺陷<br/>
                ⚡ 支持批量处理、实时检测与智能检索<br/>
                🎯 基于深度学习模型，精准识别多种缺陷类型
              </p>

              <div className="hero-ctas">
                <button
                  className="btn primary btn-lg"
                  onClick={() => { window.location.href = '/detect' }}
                >
                  <span>🔍</span> 立即检测
                </button>
                <button
                  className="btn secondary btn-lg"
                  onClick={() => { window.location.href = '/data' }}
                >
                  <span>📊</span> 数据管理
                </button>
                <button
                  className="btn secondary btn-lg"
                  onClick={() => { window.location.href = '/chat' }}
                >
                  <span>💬</span> 智能检索
                </button>
              </div>

              {/* 统计数据展示 */}
              <div className="stats-row">
                <div className="stat-item">
                  <div className="stat-number">99.2%</div>
                  <div className="stat-label">检测准确率</div>
                </div>
                <div className="stat-item">
                  <div className="stat-number">&lt;2s</div>
                  <div className="stat-label">平均响应时间</div>
                </div>
                <div className="stat-item">
                  <div className="stat-number">15+</div>
                  <div className="stat-label">缺陷类型</div>
                </div>
              </div>
            </div>

            <aside className="hero-card" aria-hidden="true">
              <div className="card-glow"></div>
              <div className="card-title">🎯 快速开始</div>
              <ul className="card-list">
                <li>
                  <span className="step-number">1</span>
                  <div>
                    <strong>上传图片</strong>
                    <p>拖拽或选择文件，支持批量上传</p>
                  </div>
                </li>
                <li>
                  <span className="step-number">2</span>
                  <div>
                    <strong>AI 自动检测</strong>
                    <p>模型自动标注缺陷并返回置信度</p>
                  </div>
                </li>
                <li>
                  <span className="step-number">3</span>
                  <div>
                    <strong>管理 & 导出</strong>
                    <p>查看历史、删除与导出结果</p>
                  </div>
                </li>
              </ul>

              <div style={{marginTop:24}}>
                <button className="btn primary full pulse" onClick={() => { window.location.href = '/detect' }}>
                  现在开始 →
                </button>
              </div>
            </aside>
          </div>
        </main>

        <section className="home-features container" aria-labelledby="features-title">
          <h2 id="features-title" className="features-heading">
            <span className="gradient-text">核心功能</span>
          </h2>
          <div className="features-grid">
            <div className="feature feature-card">
              <div className="feature-icon">📤</div>
              <div className="feature-title">多源输入</div>
              <div className="feature-desc">支持本地上传、文件夹导入、视频帧与摄像头实时拍照</div>
            </div>
            <div className="feature feature-card">
              <div className="feature-icon">👁️</div>
              <div className="feature-title">实时可视化</div>
              <div className="feature-desc">检测结果以覆盖框、热力图、置信度与详细表格展示</div>
            </div>
            <div className="feature feature-card">
              <div className="feature-icon">🔎</div>
              <div className="feature-title">智能检索</div>
              <div className="feature-desc">基于标签、自然语言与语义搜索，快速定位历史记录</div>
            </div>
            <div className="feature feature-card">
              <div className="feature-icon">💾</div>
              <div className="feature-title">数据管理</div>
              <div className="feature-desc">完整的历史记录、批量操作、筛选与导出功能</div>
            </div>
            <div className="feature feature-card">
              <div className="feature-icon">🤖</div>
              <div className="feature-title">AI 对话</div>
              <div className="feature-desc">与智能助手对话，获取维护建议和缺陷分析</div>
            </div>
            <div className="feature feature-card">
              <div className="feature-icon">📈</div>
              <div className="feature-title">统计分析</div>
              <div className="feature-desc">缺陷分布、趋势分析与可视化报表</div>
            </div>
          </div>
        </section>

        {/* 底部信息 */}
        <footer className="home-footer">
          <div className="container">
            <p>风力发电叶片缺陷检测系统 · 基于深度学习 · 2025</p>
            <p className="footer-links">
              <a href="/detect">开始检测</a>
              <span>·</span>
              <a href="/data">数据管理</a>
              <span>·</span>
              <a href="/chat">智能检索</a>
            </p>
          </div>
        </footer>
      </div>
    </>
  )
}